<template>
  <el-table :data='list.children'
            border
            max-height="680"
            stripe>
    <el-table-column type="expand">
      <template slot-scope="scope">
        <el-row style="margin-left:50px">
          <el-col :span="5">
            <el-form label-width="50px">
              <el-form-item label="难度">
                <el-rate :max="9"
                         disabled
                         v-model="scope.row.scores.difficult"></el-rate>
              </el-form-item>
              <el-form-item label="技能">
                <el-rate :max="9"
                         disabled
                         v-model="scope.row.scores.skills"></el-rate>
              </el-form-item>
              <el-form-item label="攻击">
                <el-rate :max="9"
                         disabled
                         v-model="scope.row.scores.attack"></el-rate>
              </el-form-item>
              <el-form-item label="生存">
                <el-rate :max="9"
                         disabled
                         v-model="scope.row.scores.survive"></el-rate>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <div :style="ItemStyle">
              <h1>【出装推荐1】</h1>
              <el-tooltip :content="item.name"
                          placement="top"
                          v-for="(item,i) in scope.row.items1"
                          :key="i">
                <img :src="$upload+'/'+item.icon"
                     :key="i"
                     :style="ItemImg">
              </el-tooltip>
            </div>
            <div :style="ItemStyle">
              <h1>【出装推荐2】</h1>
              <el-tooltip :content="item.name"
                          placement="top"
                          v-for="(item,i) in scope.row.items2"
                          :key="i">
                <img :src="$upload+'/'+item.icon"
                     :key="i"
                     :style="ItemImg">
              </el-tooltip>
            </div>
          </el-col>
          <el-col :span="12"
                  style="margin-left:5px;width:825px">
            <el-container>
              <el-header height="170px">
                <h1>【技能描述】</h1>
                <div v-for="(item,i) in scope.row.skills"
                     :key="i"
                     :style="SkillStyle">
                  <div style="height:100px">
                    <el-tooltip effect="dark"
                                placement="bottom">
                      <div slot="content"
                           style="width:180px">
                        <div>
                          消耗：{{item.consume}}
                        </div>
                        <div>
                          冷却：{{item.cd}}
                        </div>
                        {{item.descript}}
                      </div>
                      <img :src="$upload+'/'+item.icon"
                           :style="SkillImg">
                    </el-tooltip>
                  </div>
                  <div :style="SkillName">
                    {{item.name}}
                  </div>
                </div>
              </el-header>
              <el-main>
                <h1>【铭文推荐】</h1>
                <el-tooltip v-for="(item,i) in scope.row.Insc"
                            :key="i"
                            :content="item.name">
                  <img :src="$upload+'/'+item.icon"
                       width="60px"
                       height="60px">
                </el-tooltip>
              </el-main>
            </el-container>
          </el-col>
        </el-row>
        <div style="margin-left:50px;">
          <h1 style="margin-top:0px">【皮肤展示】</h1>
          <img v-for="(item,i) in scope.row.skins"
               :src="$upload+'/'+item"
               :key="i"
               width="300px"
               height="150px">
        </div>
        <div style="margin-left:50px;">
          <h1>【铭文Tips】</h1>
          {{scope.row.usageTips}}
          <h1>【出装1Tips】</h1>
          {{scope.row.battleTips}}
          <h1>【出装2Tips】</h1>
          {{scope.row.teamTips}}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name"
                     label="英雄名称"></el-table-column>
    <el-table-column prop="title"
                     label="英雄称号"></el-table-column>
    <el-table-column label="召唤师技能">
      <template slot-scope="scope">
        <el-tooltip v-for="(item, i) in scope.row.Hero_Skill"
                    :key="i"
                    effect="dark"
                    :content="item.name"
                    placement="top">
          <img :src="$upload+'/'+item.icon"
               :style="Icon">
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="icon"
                     label="英雄头像">
      <template slot-scope="scope">
        <img :src="$upload+'/'+scope.row.icon"
             :style="Icon">
      </template>
    </el-table-column>
    <el-table-column fixed="right"
                     label="操作"
                     width="280">
      <template slot-scope="scope">
        <el-tooltip content="编辑该英雄"
                    placement="top">
          <el-button type="primary"
                     @click="edit(scope.row)"
                     :style="EditBtn"><i class="el-icon-edit"></i></el-button>
        </el-tooltip>
        <el-tooltip content="删除该英雄"
                    placement="top">
          <el-button type="primary"
                     @click="remove(scope.row)"><i class="el-icon-delete-solid"></i></el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      SkillStyle: {
        height: '260px',
        width: '150px',
        float: 'left',
        'text-align': 'center'
      },
      SkillImg: {
        'border-radius': '50%',
        width: '90px',
        height: '90px'
      },
      EditBtn: {
        'margin-left': '20%',
        'margin-right': '40px'
      },
      SkillName: {
        height: '30px',
        'font-size': '18px'
      },
      Icon: {
        height: '3rem',
        width: '3rem'
      },
      ItemImg: {
        height: '50px',
        width: '50px'
      },
      ItemStyle: {
        'margin-left': '50px',
        'margin-bottom': '30px'
      }
    }
  },
  props: ['list'],
  methods: {
    async remove (row) {
      this.$confirm(`是否确定删除英雄?"${row.name}"`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.post('rest/hero/delete', { _id: this.list._id, index: row._id }).then(res => {
          if (res.status !== 200) {
            return this.$message.error('删除英雄失败！')
          }
          this.$store.commit('UpdataHero', { _id: this.list._id, children: this.list.children.filter(item => item._id !== row._id) })
          this.$message.success('删除英雄成功！')
        })
      })
    },
    edit (row) {
      window.sessionStorage.setItem('activePath', '/hero/create')
      this.$router.push(`/hero/edit/${row._id}`)
    }
  }
}
</script>

<style scoped>
img {
  margin-left: 5px;
}
.el-main {
  padding-top: 0px;
  padding-bottom: 0px;
}
</style>
